<template>
    <div class="content" v-for="(imgDirItem, dirIndex) of store.imagesMapStore.value" :data-dir-index="dirIndex"
        :key="imgDirItem.dirPath">
        <div class="item_title" :data-dir-index="dirIndex" v-on:click="clickImageDirExpandOrCollect">
            <div class="title">{{ imgDirItem.dirBaseName }}</div>

            <div class="title_action del" :data-dir-index="dirIndex" v-on:click="clickImageDirDel">
                <sicon class="title_action_icon" type="close" />
            </div>
            <div v-if="imgDirItem.expand" class="title_action">
                <sicon class="title_action_icon" type="down" />
            </div>
            <div v-else class="title_action">
                <sicon class="title_action_icon" type="right" />
            </div>
        </div>

        <div v-if="imgDirItem.expand" class="item_childer">
            <div class="item_image" v-for="(image, imgIndex) of imgDirItem.chidler" :data-dir-index="dirIndex"
                :data-img-index="imgIndex"
                :data-vscode-context='"{\"webviewSection\":\"imgItem\",\"basename\":" + "\"" + image.basename + "\" }"'
                :key="image.imagePath">
                <img class="image" :src="image.imageVsCodePath" :alt="image.basename">
                <div class="image_bar">
                    <div class="image_action" :data-dir-index="dirIndex" :data-img-index="imgIndex"
                        v-on:click="clickImageFile"
                        data-vscode-context='{"webviewSection": "editor", "preventDefaultContextMenuItems": true}'>
                        <sicon class="image_action_icon" type="link" />
                    </div>
                </div>
                <div class="image_name">{{ image.basename }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    useRouter,
    // useRoute
} from 'vue-router'

import * as store from './store.js'
import * as webVsCode from './web_vscode'

const router = useRouter()

function clickImageDirExpandOrCollect(event: any) {
    var dirIndex = event.currentTarget.dataset.dirIndex
    store.imagesMapStore.value[dirIndex].expand = !store.imagesMapStore.value[dirIndex].expand
    webVsCode.vscode.setState({ imageList: store.imagesMapStore.value });
}

function clickImageDirDel(event: any) {
    var dirIndex = event.currentTarget.dataset.dirIndex
    var imageDir = store.imagesMapStore.value[dirIndex];
    webVsCode.vscode.postMessage({
        type: "imageDirDel",
        data: JSON.stringify(imageDir)
    });
    store.imagesMapStore.value.splice(dirIndex, 1);
    webVsCode.vscode.setState({ imageList: store.imagesMapStore.value });
}


function clickImageFile(event: any) {
    var dirIndex = event.currentTarget.dataset.dirIndex
    var imgIndex = event.currentTarget.dataset.imgIndex

    console.log("clickImage$" + dirIndex + "-" + imgIndex);

    var imageDir = store.imagesMapStore.value[dirIndex];
    var imageItem = imageDir.chidler[imgIndex]

    webVsCode.vscode.postMessage({
        type: "insertCode",
        data: JSON.stringify(imageItem)
    });
}

function openRenameNodeView() {
    router.push("/renameNode");
}

</script>

<style scoped lang="scss">
.root {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}


.content {

    .item_title {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        padding: 0px 8px;
        text-align: start;

        box-sizing: border-box;
        border-bottom-color: var(--vscode-editor-foreground);
        border-bottom-width: 1px;
        border-bottom-style: solid;

        .title {
            flex: 1;
            line-height: 32px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .title_action {
            width: 36px;
            height: 32px;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            color: var(--vscode-editor-foreground);

            .title_action_icon {
                width: 16px;
                height: 16px;
                line-height: 16px;
                vertical-align: middle;
                text-align: center;
                font-size: 16px;
            }
        }

        .del:hover {
            color: red;
        }
    }

    .item_childer {
        display: flex;
        flex-flow: 1;
        flex-grow: 1;
        flex-basis: auto;
        flex-wrap: wrap;

        justify-content: start;
        align-items: start;
        align-content: start;
    }

    .item_image {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        align-content: center;

        .image {
            border-color: var(--vscode-list-inactiveFocusOutline);
            border-width: 1px;
            border-style: solid;
            width: 60px;
            height: 60px;
            margin: 10px;
            display: block;
            border-radius: 5px;
            object-fit: cover;
        }

        .image:hover {
            border-color: var(--vscode-list-focusOutline);
        }

        .image_bar {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            align-content: start;

            .image_action {
                width: 24px;
                height: 24px;
                display: flex;
                justify-content: center;
                align-content: center;
                align-items: center;
                background-color: var(--vscode-button-background);
                color: var(--vscode-button-foreground);
                border-radius: 5px;
                font-size: 12px;

                .image_action_icon {
                    line-height: 12px;
                    vertical-align: middle;
                    text-align: center;
                }
            }

            .image_action:hover {
                background-color: var(--vscode-button-hoverBackground);
                color: var(--vscode-button-secondaryForeground);
            }

        }


        .image_name {
            padding: 12px 0;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;

            overflow: hidden;
            width: 100%;
        }
    }
}
</style>